<template>
    <div class="demo-button">
        <div class="demo-card">
            <!--            <ygg-button :label="item" v-for="item in status" :key="item" :status="item"/>-->

            <ygg-button :label="item" v-for="item in shape" :key="item" :shape="item"/>
            <ygg-button :label="item" v-for="item in size" :key="item" :size="item"/>

            <!--类型（border）-->
            <ygg-button label="fill" type="fill" status="info"/>
            <ygg-button label="line" type="line"/>
            <ygg-button label="none" type="none"/>


            <ygg-button label="long" isLong/>


            <!-- <ygg-button disabled>
                 <span>按钮</span>
                 <ygg-icon icon="pl-circle-radio"/>
                 <span>按钮</span>
             </ygg-button>-->
        </div>

    </div>
</template>

<script>
    import YggButton from "@/components/button/ygg-button";
    import YggIcon from "@/components/ygg-icon";

    export default {
        name: "demo-button",
        components: {YggIcon, YggButton},
        props: {},
        data() {
            return {
                status: ['primary', 'success', 'warn', 'error', 'info'],
                shape: ['fillet', 'round', 'none'],
                size: ['large', 'default', 'small'],
            }
        },
        methods: {},
    }
</script>

<style lang="scss">
    .demo-button {
        .demo-card {
            & > * {
                margin-right: 8px;
            }
        }
    }
</style>
